import '@/scripts/common/common.js'
import './demo.scss'
import clockHtml from './components/clock/clock.html'
import executeClock from './components/clock/clock.js'
import threejsHtml from './components/threejs/threejs.html'
import executeThreejs from './components/threejs/threejs.js'
import canvasHtml from './components/canvas/canvas.html'
import executeCanvas from './components/canvas/canvas.js'
import svgHtml from './components/svg/svg.html'
import executeSvg from './components/svg/svg.js'

let El_container = $('.container')
let El_menuBox = $('.menu-box')
let El_menuContentItem = $('.menu-content .item')
let El_btnClose = $('.btn-close')
let El_mainContainer = $('.main-container')
let El_mainContent = $('.main-container .main-content')

let currentContent = 'canvas'
let mainContentMap = {
    clock: {
        template: clockHtml,
        executeJS: executeClock
    },
    threejs: {
        template: threejsHtml,
        executeJS: executeThreejs
    },
    canvas: {
        template: canvasHtml,
        executeJS: executeCanvas
    },
    svg: {
        template: svgHtml,
        executeJS: executeSvg
    }
}

init()

function init() {
    generateHomeBtn()

    El_menuContentItem.each(function () {
        if (currentContent) {
            setCurrentContent(currentContent)
            toggleMenuBox('add')
            setMenuActiveItem()
        }
        $(this).on('click', function () {
            setCurrentContent($(this).attr('data-name'))
            toggleMenuBox('add')
            setMenuActiveItem()
        })
    })

    El_btnClose.on('click', () => {
        toggleMenuBox('remove')
        setCurrentContent()
        setMenuActiveItem()
    })
}

function toggleMenuBox(type) {
    El_menuBox.addClass('addTransition')
    if (type === 'add') {
        El_container.addClass('hasLeftMenu')
        El_mainContainer.fadeIn()
    } else if (type === 'remove') {
        El_container.removeClass('hasLeftMenu')
        El_mainContainer.fadeOut()
    }
}

// 设置当前内容组件
function setCurrentContent(name = '') {
    El_mainContent.empty()
    currentContent = name
    if (name) {
        El_mainContent.append(mainContentMap[currentContent].template)
        mainContentMap[currentContent].executeJS()
    }
}

// 设置当前菜单选中项
function setMenuActiveItem() {
    El_menuContentItem.each(function () {
        $(this).removeClass('active')
        if ($(this).attr('data-name') === currentContent) {
            $(this).addClass('active')
        }
    })
}
